<!-- 异常流程查询 -->
<script lang="ts" setup>
import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";
import { listAffair } from "@/api/system/affair";
const { proxy } = getCurrentInstance();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    timeout:90,
    backCount:'',
    params: {},
  },
});
const { queryParams } = toRefs(data);
const loading = ref(true);
const total = ref(0);

let headers = [
  { title: "费用类型", sortable: false, key: "paymentOrderName" },
  { title: "流水号", sortable: false, key: "serialNumber" },
  { title: "经办人", sortable: false, key: "agent" },
  { title: "经办部门", sortable: false, key: "agentDept" },
  { title: "付款金额", sortable: false, key: "paymentAmount" },
  { title: "支付方式", sortable: false, key: "paymentMethod" },
  { title: "流程状态", sortable: false, key: "stateC" },
  { title: "时间", sortable: false, key: "endTime" },
  { title: "超时时间(天)", sortable: false, key: "timeout" },
  { title: "回退次数（次）", sortable: false, key: "backCount" },
  // { title: "操作", key: "actions", sortable: false },
];

let Data = ref([]);

/** 查询异常流程查询列表 */
const getList = async () => {
  loading.value = true;
  const res = await listAffair(queryParams.value);
  Data.value = res.rows;
  Data.value.forEach((item) => {
    switch (item.state) {
      case 0:
        item.stateC = "未结束";
        break;
      case 1:
        item.stateC = "已结束";
        break;
    }
    switch (item.paymentOrderFlag) {
      case 1:
        item.paymentOrderName = "咨询协作";
        break;
      case 2:
        item.paymentOrderName = "业务招待";
        break;
      case 3:
        item.paymentOrderName = "通讯费";
        break;
      case 4:
        item.paymentOrderName = "市内交通";
        break;
      case 5:
        item.paymentOrderName = "差旅";
        break;
      case 6:
        item.paymentOrderName = "会议费";
        break;
      case 7:
        item.paymentOrderName = "固定资产采购";
        break;
      case 8:
        item.paymentOrderName = "房屋租赁";
        break;
      case 9:
        item.paymentOrderName = "通用付款";
        break;
      case 10:
        item.paymentOrderName = "专家费";
        break;
      case 11:
        item.paymentOrderName = "劳务费";
        break;
      case 12:
        item.paymentOrderName = "非员工交通住宿费";
        break;
    }
  });
  total.value = res.total;
  loading.value = false;
};
const Resetting = () => {
  queryParams.value.timeout = "";
  queryParams.value.backCount = "";
};
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  getList();
};
onMounted(() => {
  getList();
});
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.timeout"
            label="超时时间(天)"
            placeholder="请输入超时时间(天)"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.backCount"
            label="退回次数(次)"
            placeholder="请输入退回次数(次)"
            density="compact"
          />
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="getList"> 查询 </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="12">
          <VDataTable
            :headers="headers"
            :items="Data"
            :items-per-page="queryParams.pageSize"
            :page="queryParams.pageNum"
            class="text-no-wrap"
          />
          <!-- <template #item.actions="{ item }">
            <div class="d-flex gap-1 position_a cction">
              <IconBtn>
                <VIcon>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-eye"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="rgb(var(--v-theme-primary))"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                    <path
                      d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                    />
                  </svg>
                </VIcon>
              </IconBtn>
            </div>
          </template>
          </VDataTable> -->
          <div class='mypagination'>
            <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 25, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          </div>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss">
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
</style>
